详解 | UI 设计中的材质与肌理效果

     欢迎关注「长弓小子」

   这儿有知识、梦想和有趣的灵魂

  小编语：  Hi，伙伴们，为了与你们更好的沟通和交流，我在知乎上开通了帐号，你可以更全面地了解我，更完整地了解蚂蚁金服的设计理念和设计方法。感兴趣的小伙伴们可以长按下方图片进行关注，期待与你有更多交流！

那么接下来，我们进入今天的正题吧 ——

在最近流行的 UI 设计语言和设计风格中，材质和肌理的效果越来越受到重视。本文将对“如何将材质和肌理的表现手法应用到 UI 设计中去”提供一些思路，相信会对你有所启发 ——

   全文共 2247 字 11 图，阅读需要 8 分钟

—  1  —

材质、肌理与设计语言

 1.   材质、肌理的基本概念

首先，我们先来理解“材质”和“肌理”这两个词的基本概念：

• 材质：是指物体看起来是什么质地，可以看作是材料和质感的结合，很好理解。
• 肌理：由于物体的材料不同，表面的组织、排列、构造各不相同，因而产生粗糙感、光滑感、软硬感。人们对肌理的感受一般是以触觉为基础的。

我们可以将肌理按照三种方式进行分类：

   按照五感分类，肌理可以分为：

• 视觉肌理：由于人们触觉物体的长期体验，以至不必触摸，便会在视觉上感到质地的不同，被称之为视觉质感
• 触觉肌理：一般通过拼压、模切、雕刻等加工方式而得到，是三维立体的肌理，用手能触摸感觉到

   按照肌理的效果分类，肌理可以分为：

• 二维平面肌理：如背景的花纹、重复的平面元素阵列效果等
• 三维立体肌理：如凹凸的花纹、有起伏的立体元素排布等
• 空间肌理：更大范围内的物体或元素的阵列，如俯瞰一座城市或者乡村等

从左至右依次为：二维平面肌理、三维立体肌理和空间肌理

   按照肌理的成因分类，肌理可以分为：

• 自然肌理：自然形成的现实纹理，如：木、石等没有加工所形成的肌理
• 创造肌理：由人工造就的现实纹理，即原有材料的表面经过加工改造，与其原来触觉不一样的一种肌理形式

 2.   材质、肌理在设计语言中的应用

从现实生活中的有很多成功的案例可以看出，在设计语言中恰当的应用材质和肌理，有助于从以下几点提升设计质量：

• 强化品牌语言的特征：突出和强调设计语言的视觉和触觉效果，传播和呈现品牌特性：

LOUIS VUITTON 的经典老花，草间弥生的南瓜，三宅一生的包

• 增加设计细节：使产品的设计细节更精致、细腻、丰富可感：

• 传递情感与功能语义：强化产品的功能，优化功能的呈现状态和视觉效果，或传递特定的功能语义，兼备视觉美化和功能优化的效果：

—  2  —

材质与肌理在 UI 设计中的应用

 1.   UI 设计的材质简史

1990 年，微软的 windows 3.0 已经开始有了浮雕、阴影的设计元素，拟物化的萌芽开始出现：

1995 年，微软的 windows95，界面上开始出现浮雕凸起、凹陷等效果，包括文件夹窗口的凹陷，在体积、光影上进行了应用。不过在质感和材质没有太大的突破：

2000 年 9 月，苹果发布了由柯戴尔·瑞茨拉夫 (Cordell Ratzlaff) 设计的用户界面 Aqua。Aqua 是指“水”，你会看到苹果在交互界面的细节之处借鉴了水滴的效果，整个界面通透而富有灵性，在当时设计领域红极一时。至此，深受我们熟知的拟物化设计风格，正式拉开序幕：

iphone 的 iOS 系统也在之后的几年里，使用了这种设计语言，并将其完善和深化。拟物化设计风格流行了近十年，成功占领了 UI 设计界的霸主地位：

2009 年，微软发布 Win7，这也是微软的一个具有历史意义的设计系统。Win7 界面加强了透明的样式设计，微软独具一格的亚克力设计风格初见端倪：

2013 年，由苹果设计师乔纳森伊夫（Jony Ive）主持设计的 iOS7，摒弃了之前的拟物化设计风格，去掉了投影和不必要的肌理效果，推出了全新的扁平化设计风格，并加入了毛玻璃的设计理念。随后 Mac 系统也通过 OS X 10.10 成功升级为扁平化风格：

2014 年，Google 正式发布了以 Material Design 作为全新的设计语言的 Android5.0。Material Design 基于扁平化设计理念，加入卡片的设计概念，将纸张的概念融入到 UI 设计中，强调光影和层次，同时具备模拟真实物理世界中运动曲线的动画效果，进而引发了动画设计语言的流行：

2017 年，与 Google 的 Material Design 相比，Microsoft Fluent Design 在设计中加入了五大元素光线（Light），深度（depth），动画（motion），材质（Material）与尺度（Scale）：

时至今日，随着设计语言一词慢慢流行起来，也出现了多元化的设计风格和材质应用，例如 New Skeuomorphism，小米的 MIUI 等等：

 2.   UI 材质的常用表现手法

看过上述材质和肌理在 UI 中的应用历史，我们可以发现，在 UI 设计中，材质和肌理的常用表现手法有以下几种：

   真实世界的材质映射：

• 是指在设计时借鉴真实世界中的物体的效果和材质，在提炼和概括后进行界面绘制
• 会使界面更熟悉、有亲和力、有身临其境的体验感
• 会使交互元素的设计传达出强烈的语意感和实操感（如可按压、可点击、可滑动），降低用户学习和理解的成本

Smart Boiler App by Karin

   半透明材质的应用：

• 毛玻璃、亚克力等材质，因其具备通透性而被广泛应用，被默认为自带高级感

• 在设计中常常作为遮罩、下拉菜单、抽屉等互动功能层等方式出现

• 颜色也可以随产品的品牌色进行适度更改

Microsoft SharePoint on Behance

   光和投影的统一设定：

• 光和投影可以增加元素的立体感和质感

• 将平面的二维世界与三维世界的界限相融合

• 提升页面视觉呈现的效果和品质

Line Chart by Mike | Creative Mints

   渐变色的应用：

• 渐变色也渐渐被纳入到材质和肌理的行列，作为一种二维平面肌理，更多的是从视觉层面上给用户带来感官刺激

• 渐变色中的合理配色同样会让元素具备一定的体积感

• 渐变色可以被应用在很多场景，前景主体元素或者背景元素都可以尝试

• 由于没有明确的现实生活中的映射，所以渐变色中的配色会引起用户不同的感受和个性化的理解

e.g.：渐变色背景营造出一种似有非有的流体物质感：

Mellow Shopping UI Thanks Credit by :- Anton Tkachev

e.g.：主要元素使用渐变色制作出立体感：

Cryptocyrrency wallet application by Alex Arutuynov

   拟真的动画效果：

• 动画的状态可以多维度的传递出材质的质感和状态

• 起到不可或缺的辅助作用，会使交互过程和元素更为真实可感

e.g.：动效提升了卡片的厚重感，使卡片层次更丰富：

Card Swipe Interaction by Minh Pham ✪

e.g.：动画效果让菜单变成了“帘子”，增添了趣味性：

Eating List. Animated. by Cadabra Studio

 3.   UI 材质设计可能的发展方向

   自然的设计：

这里的自然可能包含几种含义：

• 自然界中的材质感受与数字世界中的信息内容相结合

• 将材质的特性变为可供性（Affordance），自然的引导用户交互

• UI 界面因为材质变得更富有生命力，材质设计的探索遵循自然发展的生物性规律

   多感官的综合体验：

界面元素的材质不光是可以被看得到（视觉），还可以被听到、触碰到、闻到（听、触、嗅觉）

   创造虚拟材质：

   一切 UI 皆有材质：

图片及内容参考来源：

首图来源：https://www.behance.net/gallery/81201391/Microsoft-SharePoint

- END -

欢迎长按图片👇👇👇在 知乎 关注我

了解更多来自蚂蚁金服的设计理念和设计方法

期待与你的交集！